<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mini vue</title>
</head>
<body>
<div id="app">
    <h1>差值表达式</h1>
    <h3>{{msg}}</h3>
    <h3>{{count}}</h3>
    <h1>v-text</h1>
    <div v-text="msg"></div>
    <h1>v-model</h1>
    <input type="text" v-model="msg"/>
    <input type="text" v-model="count"/>
</div>
<!--由于vue.js 依赖observer.js 所以要提前引入-->
<script src="./js/dep.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compiler.js"></script>
<script src="./js/observer.js"></script>
<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello vue',
            count: 100,
            person: {
               name: 'zs'
            }
        }
    })

    // 当调用vm.msg的时候会调用vue中的_.proxyData中定义的get方法来返回data中的值
    // 调用get方法的时候会返回data 返回的时候又是调用data中的get方法 来将data中的key的值返回回来
    // 调用data中的get方法 就是使用observer中的defineReactive中get方法
    // （observer中的val没有被删除的原因是因为闭包 因为在最外层的get方法中调用了observer中的get方法 返回了val的值 形成了闭包）
    console.log(vm.msg)

    // vm.msg = { test: 'hello' }
</script>
</body>
</html>